<!-- 搜索框 -->
<template>
	<view class="diy-search-box dis-flex col-f ts-3 font-family">
		<view class="diy-search flex-box" :class="['angle-'+itemStyle.textAlign,'text-'+itemStyle.searchStyle]">
			<navigator class="cont" hover-class="none" openType="navigate" url="../search/search">
				<text class="iconfont icon-sousuo f-30"></text>
				<text class="f-28">{{ params.placeholder }}</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// itemIndex:{},
			itemStyle:{},
			params:{}
		},
	}
</script>

<style>
	/* common.wxss */
@import url("../../utils/common.scss");

/* 搜索框 */

.diy-search-box {
  position: unset;
  background: #f1f1f2;
  padding: 10px 24upx;
  color: #fff;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.diy-search-box .diy-search {
  width: 90%;
  border-bottom: 0;
  background: #fff;
  overflow: hidden;
  position: relative;
  color: #fff;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 10px;
  line-height: 60upx;
  border-radius: unset;
}

.diy-search-box .diy-search .cont .icon-sousuo {
  margin-right: 10upx;
}

.diy-search-box text {
  color: #999;
}

/* 输入框四角风格 */

.diy-search-box .diy-search.angle-radius {
  border-radius: 5px;
}

.diy-search-box .diy-search.angle-round {
  border-radius: 80upx;
}

/* 文字对齐 */

.diy-search-box .diy-search.text-center {
  text-align: center;
}

.diy-search-box .diy-search.text-right {
  text-align: right;
}
</style>
